<template>
	<view class="tabbar-container">
		<block>
			<!-- 针对中间的导航栏  通过true来判断控制类名和样式 -->
			<view
				class="tabbar-item"
				v-for="(item, index) in tabbarList"
				:class="[item.centerItem ? 'center-item' : '']"
				@click="changeItem(item)"
				:key="index"
			>
				<view class="item-top" @click="toPublish(index)">
					<image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
				</view>
				<!-- 通过三元判断控制类名 达到控制选中和未选中的样式 -->
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
// 组件的书写符合easycom规范 无需引入直接使用
export default {
	props: {
		currentPage: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentItem: 0,
			tabbarList: [
				{
					id: 0,
					path: '/pages/index/index',
					icon: '/static/index.png',
					selectIcon: '/static/index_active.png',
					text: '首页',
					centerItem: false
				},
				{
					id: 1,
					path: '',
					icon: '/static/jiahao.png',
					selectIcon: '/static/jiahao.png',
					text: '发布',
					// 通过类名class控制样式大小
					centerItem: true
				},
				{
					id: 2,
					path: '/pages/mine/mine',
					icon: '/static/mine.png',
					selectIcon: '/static/mine_active.png',
					text: '我的',
					centerItem: false
				}
			]
		};
	},
	created() {
		// 隐藏原来的tabBar导航栏
		uni.hideTabBar();
	},
	mounted() {
		this.currentItem = this.currentPage;
	},
	methods: {
		changeItem(item) {
			let _this = this;
			//_this.currentItem = item.id;
			uni.switchTab({
				url: item.path
			});
		},
		toPublish(i) {
			if (i != 1) return;
			if (this.$store.state.userInfo) {
				uni.navigateTo({
					url: '/pages/publish/publish'
				});
			} else {
				uni.navigateTo({
					url: '/subpages/login/login'
				});
			}
		}
	}
};
</script>
<style lang="scss" scope>
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.tabbar-container {
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	width: 100%;
	height: 100rpx;
	box-shadow: 0 0 3px #ccc;
	display: flex;
	align-items: center;
	padding: 5rpx 0;
	color: #999999;
	background-color: #fff;
	z-index: 999;

	/* 针对tabbar的统一处理 */
	.tabbar-item {
		width: 33.33%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		.item-top {
			width: 70rpx;
			height: 70rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		// 未被选中的导航栏字体
		.item-bottom {
			font-size: 28rpx;
			width: 100%;
		}
		// 被选中的导航栏字体
		.item-active {
			color: #7fa7d7;
		}
	}

	// 最中间的tabbar导航栏
	.center-item {
		display: block;
		position: relative;
		.item-top {
			flex-shrink: 0;
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: -50rpx;
			left: calc(50% - 50rpx);
			border-radius: 50%;
			box-shadow: 0 -1px 3px #ccc;
			background-color: #fff;
		}
		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
		.item-active {
			position: absolute;
			bottom: 5rpx;
			color: #7fa7d7;
		}
	}
}
</style>
